<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地图下钻</title>
</head>
<body>
    <div id="map" style="height: 920px;width: 100%;float: left">
    </div>
</body>
<!--<script src="../../mapData/js/jquery.min.js"></script>
<script type="text/javascript" src="../../mapData/js/echarts/echarts.js"></script>
<script type="text/javascript" src="../../mapData/echarts3Map/json/geometryCouties/china-main-city-map.js"></script>-->
<script type="text/javascript" src="../../js/echartsEncapsulation/MapGis.js"></script>
<script type="text/javascript">
    var chinaData = [
        {name: '北京', value: randomValue()},
        {name: '天津', value: randomValue()},
        {name: '上海', value: randomValue()},
        {name: '重庆', value: randomValue()},
        {name: '河北', value: randomValue()},
        {name: '河南', value: randomValue()},
        {name: '云南', value: randomValue()},
        {name: '辽宁', value: randomValue()},
        {name: '黑龙江', value: randomValue()},
        {name: '湖南', value: randomValue()},
        {name: '安徽', value: randomValue()},
        {name: '山东', value: randomValue()},
        {name: '新疆', value: randomValue()},
        {name: '江苏', value: randomValue()},
        {name: '浙江', value: randomValue()},
        {name: '江西', value: randomValue()},
        {name: '湖北', value: randomValue()},
        {name: '广西', value: randomValue()},
        {name: '甘肃', value: randomValue()},
        {name: '山西', value: randomValue()},
        {name: '内蒙古', value: randomValue()},
        {name: '陕西', value: randomValue()},
        {name: '吉林', value: randomValue()},
        {name: '福建', value: randomValue()},
        {name: '贵州', value: randomValue()},
        {name: '广东', value: randomValue()},
        {name: '青海', value: randomValue()},
        {name: '西藏', value: randomValue()},
        {name: '四川', value: randomValue()},
        {name: '宁夏', value: randomValue()},
        {name: '海南', value: randomValue()},
        {name: '台湾', value: randomValue()},
        {name: '香港', value: randomValue()},
        {name: '澳门', value: randomValue()}
    ];
    var provinceData = [
        {name: '甘孜藏族自治州', value: randomValue()},
        {name: '凉山彝族自治州', value: randomValue()},
        {name: '攀枝花市', value: randomValue()},
        {name: '阿坝藏族羌族自治州', value: randomValue()},
        {name: '雅安市', value: randomValue()},
        {name: '乐山市', value: randomValue()},
        {name: '宜宾市', value: randomValue()},
        {name: '眉山市', value: randomValue()},
        {name: '内江市', value: randomValue()},
        {name: '自贡市', value: randomValue()},
        {name: '泸州市', value: randomValue()},
        {name: '资阳市', value: randomValue()},
        {name: '成都市', value: randomValue()},
        {name: '德阳市', value: randomValue()},
        {name: '绵阳市', value: randomValue()},
        {name: '遂宁市', value: randomValue()},
        {name: '南充市', value: randomValue()},
        {name: '广安市', value: randomValue()},
        {name: '达州市', value: randomValue()},
        {name: '巴中市', value: randomValue()},
        {name: '广元市', value: randomValue()}
    ];
    var cityData = [
        {name: '蒲江县', value: randomValue()},
        {name: '邛崃市', value: randomValue()},
        {name: '大邑县', value: randomValue()},
        {name: '崇州市', value: randomValue()},
        {name: '新津县', value: randomValue()},
        {name: '双流县', value: randomValue()},
        {name: '温江区', value: randomValue()},
        {name: '郫县', value: randomValue()},
        {name: '新都区', value: randomValue()},
        {name: '青白江区', value: randomValue()},
        {name: '金堂县', value: randomValue()},
        {name: '锦江区', value: randomValue()},
        {name: '武侯区', value: randomValue()},
        {name: '青羊区', value: randomValue()},
        {name: '成华区', value: randomValue()},
        {name: '金牛区', value: randomValue()},
        {name: '都江堰市', value: randomValue()},
        {name: '龙泉驿区', value: randomValue()},
        {name: '彭州市', value: randomValue()}
    ];
    // 产生随机数
    function randomValue() {
        return Math.round(Math.random()*1000 + 800);
    }
    // 返回的业务数据格式
    var businessDataObj = new Object();
    businessDataObj.chinaData = chinaData;// 全国数据
    businessDataObj.provinceData = provinceData;// 省份数据
    businessDataObj.cityData = cityData;// 市区县数据
    //业务数据对象
    var options = new Object();
    options.mapUrl = path + "/mapData/echarts3Map/json/geometryCouties/";
    var map =  new TMap_Api(); // 实例化接口对象
    map.loadMapUnder(businessDataObj,"map",options);
    /*var chinaData = [
        {name: '北京', value: randomValue()},
        {name: '天津', value: randomValue()},
        {name: '上海', value: randomValue()},
        {name: '重庆', value: randomValue()},
        {name: '河北', value: randomValue()},
        {name: '河南', value: randomValue()},
        {name: '云南', value: randomValue()},
        {name: '辽宁', value: randomValue()},
        {name: '黑龙江', value: randomValue()},
        {name: '湖南', value: randomValue()},
        {name: '安徽', value: randomValue()},
        {name: '山东', value: randomValue()},
        {name: '新疆', value: randomValue()},
        {name: '江苏', value: randomValue()},
        {name: '浙江', value: randomValue()},
        {name: '江西', value: randomValue()},
        {name: '湖北', value: randomValue()},
        {name: '广西', value: randomValue()},
        {name: '甘肃', value: randomValue()},
        {name: '山西', value: randomValue()},
        {name: '内蒙古', value: randomValue()},
        {name: '陕西', value: randomValue()},
        {name: '吉林', value: randomValue()},
        {name: '福建', value: randomValue()},
        {name: '贵州', value: randomValue()},
        {name: '广东', value: randomValue()},
        {name: '青海', value: randomValue()},
        {name: '西藏', value: randomValue()},
        {name: '四川', value: randomValue()},
        {name: '宁夏', value: randomValue()},
        {name: '海南', value: randomValue()},
        {name: '台湾', value: randomValue()},
        {name: '香港', value: randomValue()},
        {name: '澳门', value: randomValue()}
    ];
    var provinceData = [
        {name: '甘孜藏族自治州', value: randomValue()},
        {name: '凉山彝族自治州', value: randomValue()},
        {name: '攀枝花市', value: randomValue()},
        {name: '阿坝藏族羌族自治州', value: randomValue()},
        {name: '雅安市', value: randomValue()},
        {name: '乐山市', value: randomValue()},
        {name: '宜宾市', value: randomValue()},
        {name: '眉山市', value: randomValue()},
        {name: '内江市', value: randomValue()},
        {name: '自贡市', value: randomValue()},
        {name: '泸州市', value: randomValue()},
        {name: '资阳市', value: randomValue()},
        {name: '成都市', value: randomValue()},
        {name: '德阳市', value: randomValue()},
        {name: '绵阳市', value: randomValue()},
        {name: '遂宁市', value: randomValue()},
        {name: '南充市', value: randomValue()},
        {name: '广安市', value: randomValue()},
        {name: '达州市', value: randomValue()},
        {name: '巴中市', value: randomValue()},
        {name: '广元市', value: randomValue()}
    ];
    var cityData = [
        {name: '蒲江县', value: randomValue()},
        {name: '邛崃市', value: randomValue()},
        {name: '大邑县', value: randomValue()},
        {name: '崇州市', value: randomValue()},
        {name: '新津县', value: randomValue()},
        {name: '双流县', value: randomValue()},
        {name: '温江区', value: randomValue()},
        {name: '郫县', value: randomValue()},
        {name: '新都区', value: randomValue()},
        {name: '青白江区', value: randomValue()},
        {name: '金堂县', value: randomValue()},
        {name: '锦江区', value: randomValue()},
        {name: '武侯区', value: randomValue()},
        {name: '青羊区', value: randomValue()},
        {name: '成华区', value: randomValue()},
        {name: '金牛区', value: randomValue()},
        {name: '都江堰市', value: randomValue()},
        {name: '龙泉驿区', value: randomValue()},
        {name: '彭州市', value: randomValue()}
    ];
    // 产生随机数
    function randomValue() {
        return Math.round(Math.random()*1000 + 800);
    }

    // 返回的业务数据格式
    var businessDataObj = new Object();
    businessDataObj.chinaData = chinaData;// 全国数据
    businessDataObj.provinceData = provinceData;// 省份数据
    businessDataObj.cityData = cityData;// 市区县数据

    var mapOption;
    //存储切换的每一级地图信息
    var mapStack = [];
    var timeFn = null;
    var curMap = {};
    // 初始化echarts示例mapChart
    var mapChart = echarts.init(document.getElementById('map'));
    $(function()
    {
        getOption();
    });
    function getOption()
    {
        // echarts配置json文件的地址
        var chartUrl = "../../config/china_map.json";
        // 读取echartsoption配置
        $.get(chartUrl, function (option)
        {
            if(option != null)
            {
                mapOption = option;
                var businessData = businessDataObj.chinaData;
                getMap("100000", "china", businessData);
            }
        });
    }
    function getMap(mapCode,mapName,businessData)
    {
        // 地图json文件的地址
        var mapUrl = "../../mapData/echarts3Map/json/geometryCouties/"+mapCode+".json";
        // 读取geo地图数据
        $.get(mapUrl, function (json)
        {
            if(json != null)
            {
                echarts.registerMap(mapName, json); // 注册地图
                mapOption.series[0].data = businessData; //设置业务数据
                mapOption.series[0].mapType = mapName; //设置地图类型
                mapChart.setOption(mapOption);
                curMap =
                {
                    mapCode: mapCode,
                    mapName: mapName
                };
            }
        });
    }
    /!**
     绑定用户切换地图区域事件
     cityMap对象存储着地图区域名称和区域的信息(name-code)
     当mapCode有值,说明可以切换到下级地图
     同时保存上级地图的编号和名称
     *!/
    // 二级三级地图切换
    var flag = 0;
    mapChart.on("mapselectchanged", function(params) {
        clearTimeout(timeFn);
        //由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
        timeFn = setTimeout(function(){
            var name = params.batch[0].name;
            var mapCode = cityMap[name];
            flag ++;
            if (!mapCode) {
                alert('无此区域地图显示');
                return;
            }
            if(flag%2 == 1)
            {
                var businessData = businessDataObj.provinceData;
                getMap(mapCode, name, businessData);
            }else if(flag%2 == 0)
            {
                var businessData = businessDataObj.cityData;
                getMap(mapCode, name, businessData);
            }
            //将上一级地图信息压入mapStack
            mapStack.push({
                mapCode: curMap.mapCode,
                mapName: curMap.mapName
            });
        }, 250);
    });
    /!**
     绑定双击事件，并加载上一级地图
     *!/
    mapChart.on("dblclick", function(params) {
        //当双击事件发生时，清除单击事件，仅响应双击事件
        clearTimeout(timeFn);
        var map = mapStack.pop();
        if (!mapStack.length && !map) {
            alert('已经到达最上一级地图了');
            return;
        }
        if(mapStack.length == 0)
        {
            var businessData = businessDataObj.chinaData;
            getMap(map.mapCode, map.mapName, businessData);
        }
        else
        {
            var businessData = businessDataObj.provinceData;
            getMap(map.mapCode, map.mapName, businessData);
        }

    });*/
</script>
</html>